<template>
  <div>
    <!--使用场合：第三方插件转换为自定义指令执行(并传递参数)-->
    <h1>自定义指令</h1>
    <!--自定义指令使用:  focus-->
    <input type="text" v-focus />
    <!--自定义指令使用:  focus, 带修饰符trim
    <input type="text" v-focus.trim />-->
    <!--自定义指令使用:  focus, 参数为abc的带修饰符trim
    <input type="text" v-focus:abc.trim />-->
    <hr />
    <div class="drag" v-drag>这个div可以拖拽</div>
  </div>
</template>

<script>
// 全局指令
import Vue from "vue";
Vue.directive("focus", () => {});
// 导入外部插件(可以是第三方)
import Drag from "../plugins/drag.js";

export default {
  name: "demon10",
  data() {
    return {};
  },
  // 局部指令,指令名称为xx,则指令为"v-指令名"
  // bind inserted update componentUpdated unbind
  directives: {
    // 指令对象
    focus: {
      // 只调用一次，第一次绑定元素的时候
      bind(el) {
        console.log("绑定对象:" + el);
      },
      // 插入到页面的时候的钩子函数
      // el为原生的元素
      inserted(el, binding, vnode) {
        console.log("插入:" + el);
        el.focus();
        console.log(binding);
        console.log(vnode);
      },
      // 所在组件的vnode更新的时候调用,可能发生在子节点更新之前
      update(el) {
        console.log(el);
      },
      // 指定所在组件的vnode及其子节点全部更新后调用
      componentUpdated(el) {
        console.log(el);
      },
      // 只调用一次，指令与元素解绑的时候调用
      unbind() {}
    },
    // drag指令
    drag: {
      // el为对应元素
      // 拖动原生：mousedown mousemove mouseup
      inserted(el) {
        console.log(el);
        // 事件名,事件函数,是否冒泡(事件捕获方式)
        Drag(el);
      }
    }
  }
};
</script>
<style lang="stylus" scoped>
.drag {
  position: absolute;
  width: 400px;
  height: 300px;
  left: 50px;
  background-color: red;
}
</style>
